<template>
    <t-space direction="vertical">
        <t-chat :clear-history="false" :reverse="false" layout="single">
            <t-chat-item avatar="https://tdesign.gtimg.com/site/avatar.jpg" name="自己" role="user" datetime="今天16:38"
                content="牛顿第一定律是否适用于所有参考系？" variant="text"></t-chat-item>
            <t-chat-item avatar="https://tdesign.gtimg.com/site/chat-avatar.png" name="TDesignAI" role="assistant"
                datetime="今天16:38"
                content="牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。"
                variant="text"></t-chat-item>
            <t-divider>有头像有昵称</t-divider>

            <t-chat-item avatar="https://tdesign.gtimg.com/site/avatar.jpg" role="user" content="牛顿第一定律是否适用于所有参考系？"
                variant="text"></t-chat-item>
            <t-chat-item avatar="https://tdesign.gtimg.com/site/chat-avatar.png" role="assistant"
                content="牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。"
                variant="text"></t-chat-item>
            <t-divider>有头像无昵称</t-divider>

            <t-chat-item name="自己" role="user" datetime="今天16:38" content="牛顿第一定律是否适用于所有参考系？"
                variant="text"></t-chat-item>
            <t-chat-item name="自己" role="assistant" datetime="今天16:38"
                content="牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。"
                variant="text"></t-chat-item>
            <t-divider>无头像有昵称</t-divider>

            <t-chat-item role="user" content="牛顿第一定律是否适用于所有参考系？" variant="text"></t-chat-item>
            <t-chat-item role="assistant"
                content="牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。"
                variant="text"></t-chat-item>
            <t-divider>无头像无昵称</t-divider>

        </t-chat>
    </t-space>
    <t-divider>对话</t-divider>
    <t-chat-item content="模型由 <span>hunyuan</span> 变为 <span>GPT4</span>" variant="base"
        role="model-change"></t-chat-item>
    <t-divider>模型切换</t-divider>
    <t-chat-item avatar="https://tdesign.gtimg.com/site/avatar.jpg" name="自己" datetime="今天16:38" content="！！！请求出错"
        role="error"></t-chat-item>
    <t-divider>错误提示</t-divider>
    <div>
        <t-chat-item role="assistant">
            <template #avatar>
                <t-avatar size="large" shape="circle"
                    image="https://tdesign.gtimg.com/site/chat-avatar.png" /></template>
            <template #name>
                <p>AI助手</p>
            </template>
            <template #datetime>
                <p>今天16:38</p>
            </template>
            <template #content>
                <t-chat-content
                    content="牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。"></t-chat-content>
                <div class="bubble">
                    <t-image src="https://tdesign.gtimg.com/demo/demo-image-1.png" shape="round" fit="scale-down" />
                    <div class="link">参考链接</div>
                    <ul>
                        <li>
                            <t-link theme="primary"> 维基百科 </t-link>
                        </li>
                        <li><t-link theme="primary"> 高中物理 </t-link></li>
                    </ul>
                </div>
            </template>
            <template #actions>
                <t-chat-action :is-good="isGood" :is-bad="isBad"
                    content="牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。"
                    @operation="(type: string) => handleOperation(type)" />
            </template>
        </t-chat-item>
    </div>
    <t-divider>自定义</t-divider>
</template>
<script setup lang="ts">import { ref } from 'vue';
const isGood = ref(false);
const isBad = ref(false);
const handleOperation = (type: string) => {
    if (type === 'good') {
        isGood.value = !isGood.value;
        isBad.value = false;
    } else if (type === 'bad') {
        isBad.value = !isBad.value;
        isGood.value = false;
    }
};</script>
<style scoped lang="scss">
.bubble {
    margin: 0 0 10px 16px;

    .link {
        margin-top: 10px;
    }

    li {
        color: var(--td-brand-color-7);
    }
}

.t-image__wrapper {
    background: none;
}
</style>
